<template>
	<div class="live-top-popup">
		<p class="top-word">{{topTitle}}</p>
		<div class="live-info-box">
			<img :src="roomInfo.roomInfo.userAnchor.headImg">
			<p class="live-name">{{roomInfo.roomInfo.userAnchor.nickname}}</p>
			<div class="colltect-live" :class="[$store.state.isCollect?'colltect-live-gray':'colltect-live-red']" @click="clickCollect">
				{{$store.state.isCollect?'已收藏':'收藏'}}
			</div>
		</div>
		<div class="connect-box" v-html="roomInfo.roomInfo.topWord">

		</div>
		<div class="footer-btn" @click="clickFooterBtn">
			<div>
				<img src="../../../assets/images/arrow-top.png">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			roomInfo: Object,
		},
		data() {
			return {
               topWord: '',
			   roomId: this.$route.params.roomid, //房间id
			   topTitle:'',
			}
		},
		created() {
			let {
				roomInfo: {
					topWord,title
				}
			} = this.roomInfo;
			//this.topWord = fun.wordlimit(topWord, 14);
			this.topTitle = fun.wordlimit(title,14);
		},
		methods:{
			clickFooterBtn(){
				this.$emit("formChildMsg", {
					type: 'closeLiveTopPopup',
					data:''
				});
			},
			clickCollect(){
				if (this.$store.state.isYk) { //游客
				  fun.ykDisposeFun();
				  return
				}
			   if(this.$store.state.isCollect){
				   fun.setLiveCollectFun(this.roomId,'0');
			   }else{
				   fun.setLiveCollectFun(this.roomId,'1');
			   }	
			},
		}
	}
</script>

<style scoped="scoped" lang="less">
	.live-top-popup {
		width: 100%;
		height: 612px;
		background: rgba(0, 0, 0, 0.8);
		padding: 1px 0 0 0;

		.top-word {
			margin: 92px 0 27px 22px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 30px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 42px;
		}

		.live-info-box {
			width: fit-content;
			padding: 5px 13px 5px 7px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 50px;
			line-height: 50px;
			// background: darkgoldenrod;
			// background: rgba(0, 0, 0, 0.3);
			border-radius: 39px;
			font-size: 24px;
			font-weight: 500;
			color: #FFFFFF;
			margin: 38px 0 15px 20px;

			.live-name {
				margin: 0 12px 0;
			}

			.colltect-live {
				padding: 5px 10px;
				background: linear-gradient(223deg, #FF3088 0%, #FE4858 100%);
				border-radius: 23px;
				line-height: 25px;
				font-size: 22px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
            .colltect-live-red {
            	background: linear-gradient(223deg, #FF3088 0%, #FE4858 100%);
            }
            .colltect-live-gray {
            	background: #999999;
            }
			img {
				width: 40px;
				height: 40px;
				background: darkgreen;
				border-radius: 50%;
			}
		}

		.connect-box {
			width: 100vw;
			height: 320px;
			// background: darkblue;
			overflow-y: scroll;
			padding: 0 30px;
			font-size: 28px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;
		}

		.footer-btn {
			position: absolute;
			bottom: 0px;
			width: 100%;

			div {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 44px;
					height: 44px;
				}
			}
		}
	}
</style>
